import { useState } from "react";
import axios from "axios";

import Search from "./pages/Search";
import UserList from "./pages/UserList";

function App() {
  // 用户列表数据
  const [userList, setUserList] = useState([
    // {
    //   login: "A",
    //   id: 1410106,
    //   avatar_url: "https://avatars.githubusercontent.com/u/1410106?v=4",
    //   html_url: "https://github.com/A",
    // },
  ]);
  // loading数据
  const [loading, setLoading] = useState(false);
  // 是否搜索过 -> 是否是第一次渲染
  const [hasSearch, setHasSearch] = useState(false);

  const searchUserList = async (keyword) => {
    setHasSearch(true);
    setLoading(true);
    // axios.get('https://api.github.com/search/users?q=' + keyword)
    const result = await axios.get("https://api.github.com/search/users", {
      params: { q: keyword },
    });
    setUserList(
      result.data.items.map((user) => {
        return {
          id: user.id,
          login: user.login,
          avatar_url: user.avatar_url,
          html_url: user.html_url,
        };
      })
    );
    setLoading(false);
  };

  return (
    <div className="container">
      <Search searchUserList={searchUserList} />
      <UserList userList={userList} loading={loading} hasSearch={hasSearch}/>
    </div>
  );
}

export default App;
